<template>
  <div class="outFootball">
      <div class="flex1">
        <div class="flex1-left">
          <div class="flex1-left-box">
            <div class="banner">
              <swiper :options="swiperOption" ref="mySwiper" v-if="banner.length>0">
                <!-- slides -->
                 <swiper-slide v-for='(item,index) in banner' :key='index'><a :href="keyUrl+item.url"><img :src="keyUrl+(item.image.replace('-lp',''))"></a></swiper-slide>
                <!-- Optional controls -->
                <div class="swiper-pagination" slot="pagination"></div>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
              </swiper>
            </div>
            <ul class="flex1-left-box-txt">
              <li  v-for='(item,index) in getOutfootMainOne'>
                <a :href="keyUrl+item.url">
                  <span class="dot"></span>
                  <span class="time">{{item.pubdate}}</span>
                  <p>{{item.title}}</p>

                </a>
              </li>
            </ul>
          </div>
          <div class="flex1-left-box">
            <div class="tab-box">
              <nav>
                <div :class="tabCurrent == 0 ? 'hover':''" @click='tabCurrent=0'><p>高清图集</p><span class="line"></span></div>
                <div :class="tabCurrent == 1 ? 'hover':''" @click='tabCurrent=1'><p>最新文章</p><span class="line"></span></div>
              </nav>
              <div class="tab-con">
                <template v-for='(item,index) in tabList'>
                  <div class="tab-item" v-show='tabCurrent == index'>
                    <ul>
                      <li v-for='(items,indexs) in item'>
                        <a :href="keyUrl+items.url">
                          <img :src="keyUrl+items.image">
                          <p>{{items.title}}</p>
                        </a>
                      </li>
                    </ul>
                  </div>
                </template>
              </div>
            </div>
            <div>
              <ul class="news">
                <router-link tag="li" :to='{name:"list",params:{api:"getOutfootMain"}}' class="more">更多</router-link>
                <li  v-for='(item,index) in getOutfootMainTwo'>
                  <a :href="keyUrl+item.url">
                    <span class="dot"></span>
                    <span class="time">{{item.pubdate}}</span>
                    <p>{{item.title}}</p>
                  </a>
                </li>
              </ul>
              <ul class="news">
                <router-link tag="li" :to='{name:"list",params:{api:"getOutfootMain"}}' class="more">更多</router-link>
                <li v-for='(item,index) in getOutfootMainThree'>
                  <a :href="keyUrl+item.url">
                    <span class="dot"></span>
                    <span class="time">{{item.pubdate}}</span>
                    <p>{{item.title}}</p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="flex1-right">
            <div class="title">
              <span class="line"></span>
              <p>深度阅读</p>
            </div>
            <ul class="img_W251">
              <li v-for='(item,index) in getOutfootReadOne' :key='index'>
                <a :href="keyUrl+item.url">
                  <img :src="keyUrl+item.image" alt="">
                  <p>{{item.title}}</p>
                </a>
              </li>
            </ul>
            <div class="title">
              <span class="line"></span>
              <p>欧洲烽火 + 五洲热报</p>
            </div>
            <ul class="txt_W251">
              <li v-for='(item,index) in getOutfootReadTwo' :key='index'>
                <a :href="keyUrl+item.url">
                  <span class="dot"></span>
                  <p>{{item.title}}</p>
                </a>
              </li>
            </ul>
        </div>
      </div>
      <div class="flex2">
        <div class="flex2-item">
          <router-link tag="div" :to='{name:"list",params:{api:"getOutfootYC"}}' class="flex2-item-title">
            <p>英超新闻</p>
            <span class="line"></span>
            <font>更多</font>
          </router-link>
          <ul class="news">
            <li v-for='(item,index) in getOutfootYCs' :key='index'>
              <a :href="keyUrl+item.url">
                <span class="dot"></span>
                <span class="time">{{item.pubdate}}</span>
                <p>{{item.title}}</p>
              </a>
            </li>
          </ul>
        </div>
        <div class="flex2-item">
          <router-link tag="div" :to='{name:"list",params:{api:"getOutfootXJ"}}' class="flex2-item-title">
            <p>西甲新闻</p>
            <span class="line"></span>
            <font>更多</font>
          </router-link>
          <ul class="news">
            <li v-for='(item,index) in getOutfootXJs' :key='index'>
              <a :href="keyUrl+item.url">
                <span class="dot"></span>
                <span class="time">{{item.pubdate}}</span>
                <p>{{item.title}}</p>
              </a>
            </li>
          </ul>
        </div>
        <div class="flex2-item">
          <router-link tag="div" :to='{name:"list",params:{api:"getOutfootYJ"}}' class="flex2-item-title">
            <p>意甲新闻</p>
            <span class="line"></span>
            <font>更多</font>
          </router-link>
          <ul class="news">
            <li v-for='(item,index) in getOutfootYJs' :key='index'>
              <a :href="keyUrl+item.url">
                <span class="dot"></span>
                <span class="time">{{item.pubdate}}</span>
                <p>{{item.title}}</p>
              </a>
            </li>
          </ul>
        </div>
        <div class="flex2-item">
          <router-link tag="div" :to='{name:"list",params:{api:"getOutfootDJ"}}' class="flex2-item-title">
            <p>德甲新闻</p>
            <span class="line"></span>
            <font>更多</font>
          </router-link>
          <ul class="news">
            <li v-for='(item,index) in getOutfootDJs' :key='index'>
              <a :href="keyUrl+item.url">
                <span class="dot"></span>
                <span class="time">{{item.pubdate}}</span>
                <p>{{item.title}}</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
  </div>
</template>

<script>
  import { getOutfootBanner,getOutfootArticle,getOutfootRead,getOutfootYC,getOutfootXJ,getOutfootYJ,getOutfootDJ,getOutfootMain } from '@/request/api'
  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper'

  export default {
    components: {
      swiper,
      swiperSlide
    },

    data() {
      return {
        tabCurrent:0,
        swiperOption: {
          autoplay: {
            delay: 1500,
            disableOnInteraction: true
          },
          observeParents: true,
          observer: true,
          speed: 1000,
          loop: true,
          watchOverflow: false,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        },
        banner:[],
        tabList:[],
        getOutfootYCs:[],
        getOutfootXJs:[],
        getOutfootDJs:[],
        getOutfootYJs:[],
        getOutfootMainOne:[],
        getOutfootMainTwo:[],
        getOutfootMainThree:[],
        getOutfootReadOne:[],
        getOutfootReadTwo:[],
      };
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    methods: {

    },
    created(){
      getOutfootBanner().then((v)=>{
        let data = v.data;
        this.banner = data;
      })
      getOutfootArticle().then((v)=>{
        let data = v.data;
        this.tabList = [data.slice(0,6),data.slice(6,12)];
      })
      getOutfootYC().then((v)=>{
        let data = v.data;
        this.getOutfootYCs = data.slice(0,15);
      })
      getOutfootXJ().then((v)=>{
        let data = v.data;
        this.getOutfootXJs = data.slice(0,15);
      })
      getOutfootYJ().then((v)=>{
        let data = v.data;
        this.getOutfootYJs = data.slice(0,15);
      })
      getOutfootDJ().then((v)=>{
        let data = v.data;
        this.getOutfootDJs = data.slice(0,15);
      })
      getOutfootMain().then((v)=>{
        let data = v.data;
        this.getOutfootMainOne = data.slice(0,9);
        this.getOutfootMainTwo = data.slice(9,18);
        this.getOutfootMainThree = data.slice(18,27);
      })
      getOutfootRead().then((v)=>{
        let data = v.data;
        this.getOutfootReadOne = data.slice(0,3);
        this.getOutfootReadTwo = data.slice(3,8);
      })
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      //this.swiper.slideTo(0, 555000, false)
    }
  };

</script>

<style lang='scss' scoped>
  .home-wrap {
    width: 100%;
    height: 100%;

    .swiper {
      width: 100%;
      height: 100%;
    }
  }
  @import url(../assets/css/outFootball.css);
</style>

